<template>
	<view class="w100">
		<view class="cu-bar bg-white">
			<view class="action">
				{{label}}
				<text class="c12 fs8 padl3">{{placeholder}}</text>
			</view>
			<view class="action">
				<view class="cu-btn line-green round" @click="selectPic()">选择图片</view>
			</view>
		</view>
		<view class="cu-form-group padb5">
			<view class="solids fs30 c12" @tap="selectPic()" v-if="picUrl===''">
				<view class=" wh30-30 flcc"><text class='cuIcon-cameraadd'></text></view>
			</view>
			<scroll-view scroll-x="true" class="scroll-view_H" v-if="picUrl!==''">
				<view class="pos-r bdso inlineBlock mar3 " v-for="tile, index in [picView]">
					<image @tap="viewPic(pic(tile))" mode="aspectFill" class="picCommonSize bc13" :src="tile"></image>
					<!-- <view class="pos-a w100 r0 l0 b0 flrc op8">
			            <view class="cu-btn cuIcon bg-black" @click="move(index,-1)">
			                <view class="fa fa-angle-left"></view>
			            </view>
			            <view class="cu-btn cuIcon bg-black" @click="move(index,1)">
			                <view class="fa fa-angle-right"></view>
			            </view>
			            <view class="cu-btn cuIcon bg-black" @click="del(index)">
			                <view class="fa fa-trash"></view>
			            </view>
			        </view> -->
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import picUpLoad from "../../assets/js/picUpload.js";
	let picUp = new picUpLoad()
	export default {
		name: "spic",
		props: {
			value: "",
			label: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				picUrl: '',
				picView: '',
			}
		},
		methods: {
			selectPic() {
				var _this = this;
				picUp.setData([])
				picUp.select(1).setCbFunc(function(pics) {
					let picsArrayV = picUp.getViewData(pics);
					_this.picView = picsArrayV.length > 0 ? picsArrayV[0] : ''
					let picsArray = picUp.getData(pics);
					_this.picUrl = picsArray.length > 0 ? picsArray[0] : ''
					_this.$emit("input", _this.picUrl)
				})
			},
			del(index) {
				var _this = this;
				var pics = picUp.removePic(index)
				this.picUrl = picUp.getViewData(pics)
				_this.$emit("input", pics)
			},
			move(index, num) {
				var _this = this;
				var pics = picUp.picMove(index, num)
				this.picUrl = picUp.getViewData(pics)
				_this.$emit("input", pics)
			},
		},
		created() {
			if (this.$com.isbool(this.value)) {
				picUp.setData([this.value])
				let pics = picUp.getViewData()
				this.picView = pics.length > 0 ? pics[0] : ''
				pics = picUp.getData()
				this.picUrl = pics.length > 0 ? pics[0] : ''
			}

		},
		watch: {
			value(curVal, oldVal) {
				if (this.$com.isbool(curVal)) {
					picUp.setData([curVal])
					let pics = picUp.getViewData()
					this.picView = pics.length > 0 ? pics[0] : ''
					pics = picUp.getData()
					this.picUrl = pics.length > 0 ? pics[0] : ''
				}
			},
		}
	}
</script>

<style>
	.picCommonSize {
		width: 40vw;
		height: 40vw;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>
